import { ref, reactive, onUnmounted, onMounted } from "vue";
import { Leafer } from "leafer-ui";
import { ToolManager } from "../core/ToolManager";
import { PenTool } from "../tools/PenTool";
import type { IToolConfig } from "../types";

export const useDrawing = (containerId: string) => {
  // 初始化Leafer
  let app: Leafer;

  // 响应式配置
  const config = reactive<IToolConfig>({
    pen: { color: "#C40833", width: 6 },
    eraser: { size: 20 },
    text: { fontSize: 16 },
  });

  // 工具管理器实例
  let toolManager: ToolManager;
  // 注册其他工具...

  // 当前活动工具
  const activeTool = ref("");

  // 切换工具
  const setActiveTool = (toolName: string) => {
    activeTool.value = toolName;
    toolManager.switchTool(toolName);
  };
  onMounted(() => {
    app = new Leafer({ view: containerId });
    toolManager = new ToolManager(app, config);
    // 注册工具（类实现）
    toolManager.registerTool(new PenTool(app, config));
  });
  // 清理资源
  onUnmounted(() => {
    app.destroy();
  });

  return {
    activeTool,
    config,
    setActiveTool,
  };
};
